<template>
  <div class="header">
    <div class="header-background"></div>
    <div class="header-left">
      <a
        href="javascript:;"
        class="header-icon"
        @click="collapseTrigger"
        role="button"
      >
        <s-icon
          v-if="collapse"
          icon="suncaper-menu-fold"
        />
        <s-icon
          v-else
          icon="suncaper-menu-unfold"
        />
      </a>
      <span>{{userName}}</span>
      <div class="block" style="display: inline-block; margin-left: 10px;">
        <el-rate
            show-text
            :texts="customTexts"
            v-model="value2"
            :colors="colors"
            style="margin-top: 10px;"
        ></el-rate>
      </div>
    </div>
    <div class="header-center" style="font-weight: bold;">
      <span>招生活动平台</span>
<!--      <template>-->
<!--        <el-switch v-model="isDark" @change="changeMode" active-color="#13ce66" inactive-color="#ff4949" style="margin-top:20px;z-index: 9999;position: absolute">-->
<!--        </el-switch>-->
<!--      </template>-->
    </div>
    <div class="header-right" style="font-size: 16px; display: flex; align-items: center; gap: 12px;">
      <a href="#" class="text-center" @click="turnFor" style="color: #333; font-weight: bold; text-decoration: none;">返回</a>
      <a href="#" class="text-center" @click="turnIndex" style="color: #333; font-weight: bold; text-decoration: none;">首页</a>

      <a href="javascript:;" class="header-logout" @click="logout" role="button">
        <s-tooltip effect="dark" content="发送邮件" placement="bottom">
          <i class="el-icon-message" @click="email" style="font-size: 22px;"></i>
        </s-tooltip>
      </a>
      <a href="javascript:;" class="header-logout" @click="logout" role="button">
        <s-tooltip effect="dark" content="日期规划" placement="bottom">
          <i class="el-icon-date" @click="turnCalendar" style="font-size: 22px;"></i>
        </s-tooltip>
      </a>

      <a href="javascript:;" class="header-logout" @click="logout" role="button">
        <s-tooltip effect="dark" content="客服电话" placement="bottom">
          <i class="el-icon-phone-outline"  style="font-size: 22px;"></i>
        </s-tooltip>
      </a>
      <a href="javascript:;" class="header-logout" @click="logout" role="button">
      <s-tooltip effect="dark" content="个人信息" placement="bottom">
        <i class="el-icon-user-solid" @click="userInfo" style="font-size: 22px;"></i>
      </s-tooltip>
      </a>

      <a href="javascript:;" class="header-logout" @click="logout" role="button">
        <s-tooltip effect="dark" content="设置" placement="bottom">
          <i class="el-icon-setting"  style="font-size: 22px;"></i>
        </s-tooltip>
      </a>

      <a href="javascript:;" class="header-logout" @click="logout" role="button">
        <s-tooltip effect="dark" content="退出" placement="bottom">
          <i class="el-icon-switch-button" @click="exit" style="font-size: 22px;"></i>
        </s-tooltip>
      </a>
    </div>

  </div>
</template>

<script>
import Icon from '@/components/Icon'
import {Tooltip} from 'element-ui'

export default {
  name: 's-header',
  data: function () {
    return {
      isDark: false,
      customTexts: ['很差', '较差', '一般', '较好', '很好'], // 自定义文本内容，与分数值对应
      value2: null,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'] // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
    }
  },
  props: {
    collapseTrigger: Function,
    collapse: Boolean,
    logout: Function,
    userName: String,
    roleName: String
  },
  components: {
    's-icon': Icon,
    's-tooltip': Tooltip
  },
  methods: {
    email () {
      this.$router.push('/main/email/email')
    },
    changeMode (val) {
      // 获取html根元素标签
      let html = document.documentElement
      if (val) {
        // html添加class="dark"选择器
        html.classList.add('dark')
      } else {
        // html移除class="dark"选择器
        html.classList.remove('dark')
      }
    },
    turnCalendar () {
      this.$router.push('/main/calendar/calendar')
    },
    turnFor () {
      this.$router.go(-1)
    },
    userInfo () {
      this.$router.push('/main/user/userInfo')
    },
    exit () {
      this.userName = null
      this.roleName = null
      this.$router.push('/login')
    },
    turnIndex () {
      this.$router.push('/index')
    }
  }
}
</script>

<style lang="less" scoped>
  @import "../assets/styles/var";
  .header {
    width: 100%;
    height: 60px;
    padding: 0 23px;
    line-height: 59px;
    box-sizing: border-box;
    //background-image: url('../../src/assets/images/headerback.jpg');
    background: #ffffff;
    border-bottom: 1px solid @borderBottomColor;
    position: relative;
    overflow: hidden;
    > span {
      vertical-align: middle;
    }
  }
  .header-left {
    display: inline-block;
  }
  .header-center {
    position: absolute; /* 绝对定位 */
    left: 50%; /* 水平居中 */
    top: 50%; /* 垂直居中 */
    transform: translate(-50%, -50%); /* 使元素的中心点位于屏幕中间 */
  }

  /* 可以根据需要调整字体大小、颜色等样式 */
  .header-center span {
    font-size: 24px; /* 适当调整字体大小 */
    color: #333; /* 可以修改颜色 */
  }
  .header-right {
    font-size: 14px;
    float: right;
    display: inline-block;
  }
.header-title {
  font-size: 14px;
  margin-left: 10px;
}
  .header-icon {
    font-size: 22px;
    color: inherit;
    outline: none;
    display: inline-block;
    text-decoration: none;
    vertical-align: top;
    &:hover {
      color: @dch;
    }
  }
  .header-logout {
    .header-icon;
    .text-center;
    font-size: 14px;
    line-height: normal;
    &:hover {
      color: red;
    }
  }
  .text-center{
    vertical-align: middle;
  }

  //.header-background {
  //  background-image: url('../../src/assets/images/headerback.jpg');
  //  background-size: cover;
  //  background-position: center;
  //  height: 100vh;
  //}
</style>
